<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.认识一下VueComponent</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	<!-- 
		认识VueComponent:
				1.School组件的本质是一个构造函数，名为VueComponent。

				2.VueComponent这个构造函数，不是程序员定义的，也不是引入了Vue就有的，而是Vue.extend()生成的。

				3.Vue.extend()每次生成的都是一个全新的VueComponent构造函数！！！（现在来看，知道这没啥用，但以后会很有用）

				4.我们只需要写<School></School>或<School/> Vue就会帮我们执行： new VueComponent(options)。

				5.关于this的指向：
						(1).组件配置中（Vue.extend(options)）：
									data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
										—— 它们的this均是【VueComponent实例对象】。vc
						(2).new Vue(options)配置中：
									data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
										—— 它们的this均是【Vue实例对象】。vm
						备注：vc其实就是一个小型的vm，有点小区别，例如：vm可以拥有el，而vc不能拥有

				6.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
						Vue的实例对象，以后简称vm。
				
				7.关于如下代码，总结：	
							Vue有几个？—— 1个
							VueComponent有几个？ —— 定义了几个组件，就有几个，对于下方代码来说，2个
							vm有几个？—— 1个
							vc有几个？—— 编写了几个组件标签，就有几个vc，对于下方代码来说，3个
		-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
				//阻止 vue 在启动时生成生产提示。
				Vue.config.productionTip = false

				//定义一个School组件
				let School = Vue.extend({
					name:'School',
					template:`
						<div>
							<h2>学校名称：{{name}}</h2>
							<h2>学校短名称：{{shortName}}</h2>
							<h2>学校地址：{{address}}</h2>
							<button @click="changeName">点我修改学校名</button>
						</div>
					`,
					data(){
						console.log('data',this) //VueComponent的实例对象,vc
						return {
							name:'尚硅谷',
							address:'宏福科技园'
						}
					},
					methods:{
						changeName(){
							console.log('methods-changeName',this) //VueComponent的实例对象,vc
							this.name = 'atguigu'
						}
					},
					computed: {
						shortName(){
							console.log('computed-shortName',this)//VueComponent的实例对象,vc
							return this.name.slice(0,2)
						}
					},
					watch:{
						name(value){
							console.log('watch-name',this)//VueComponent的实例对象,vc
						}
					}
				})
				//创建App组件
				let App = Vue.extend({
					name:'App',
					template:`
					<div>
						<School/>
						<School/>
					</div>`,
					components:{School}
				})
				//创建vm
				let vm = new Vue({
					el:'#demo',
					template:`<App/>`,
					components:{App}
				})

		</script>
	</body>
</html>